<template>
  <uni-popup ref="customerForm" type="dialog">
    <div class="popConfig">
      <view class="popConfig-title">
        {{ title }}
      </view>
      <div class="popConfig-content">
        <uni-forms ref="valiForm" :rules="rules" :model-value="valiFormData" label-width="90px" label-align="right">
          <uni-forms-item label="所属单位" required name="company">
            <uni-easyinput v-model="valiFormData.company" placeholder="请输入所属单位" />
          </uni-forms-item>
          <uni-forms-item label="场站名称" required name="stationName">
            <uni-easyinput v-model="valiFormData.stationName" placeholder="请输入场站名称" />
          </uni-forms-item>
          <uni-forms-item label="联系人" required name="contactName">
            <uni-easyinput v-model="valiFormData.contactName" placeholder="请输入联系人" />
          </uni-forms-item>
          <uni-forms-item label="手机号" required name="phone">
            <uni-easyinput v-model="valiFormData.phone" placeholder="请输入手机号" @blur="checkBlur" />
          </uni-forms-item>
          <uni-forms-item label="邮箱" required name="mailbox">
            <uni-easyinput v-model="valiFormData.mailbox" placeholder="请输入邮箱" />
          </uni-forms-item>
          <uni-forms-item label="状态" required name="status">
            <uni-data-select v-model="valiFormData.status" :localdata="statusList" />
          </uni-forms-item>
          <uni-forms-item label="备注" name="remark">
            <uni-easyinput v-model="valiFormData.remark" type="textarea" placeholder="请输入备注" />
          </uni-forms-item>
        </uni-forms>
      </div>
      <view class="popConfig-btn">
        <button @click="close">
          取消
        </button>
        <button type="primary" @click="operate('valiForm')">
          提交
        </button>
      </view>
    </div>
  </uni-popup>
</template>

<script>
import { detailsCustomers, postCustomer, putCustomer } from '@/apis/customer.js'
export default {
  name: 'CustomerForm',
  props: {
    statusList: {
      type: Array,
      required: true,
    },
  },
  data() {
    return {
      title: '新增',
      customerId: undefined,
      valiFormData: {
        company: '',
        stationName: '',
        contactName: '',
        phone: '',
        mailbox: '',
        status: '',
        remark: '',
      },
      // 校验规则
      rules: {
        company: {
          rules: [{
            required: true,
            errorMessage: '所属单位不能为空',
          }],
        },
        stationName: {
          rules: [{
            required: true,
            errorMessage: '场站名称不能为空',
          }],
        },
        contactName: {
          rules: [{
            required: true,
            errorMessage: '联系人不能为空',
          }],
        },
        phone: {
          rules: [{
            required: true,
            errorMessage: '所属单位不能为空',
          },
          ],
        },
        mailbox: {
          rules: [{
            required: true,
            errorMessage: '邮箱不能为空',
          }],
        },
        status: {
          rules: [{
            required: true,
            errorMessage: '状态不能为空',
          }],
        },
      },
    }
  },
  methods: {
    checkBlur(e) {
      const reg = /^1[3456789]\d{9}$/
      if (!reg.test(e.detail.value)) {
        uni.showToast({
          title: '手机号码不正确',
        })
        this.valiFormData.phone = ''
      }
    },
    async getDetail(item) {
      const res = await detailsCustomers(item)
      this.valiFormData = res
    },
    close() {
      this.$refs.customerForm.close()
    },
    operate(ref) {
      if (this.title === '编辑') {
        this.editCustomer(ref)
      } else if (this.title === '新增') {
        this.addCustomer(ref)
      }
    },
    open(item) {
      if (item) {
        this.title = '编辑'
        this.customerId = item
        this.getDetail(item)
      } else {
        this.title = '新增'
        this.valiFormData = {}
      }
      this.$refs.customerForm.open()
    },
    addCustomer(ref) {
      this.$refs[ref].validate().then((item) => {
        uni.showLoading({
          title: '提交中',
        })
        this.addRequest(item)
      }).catch((err) => {
        uni.showToast({
          icon: 'none',
          title: err,
        })
      })
    },
    async addRequest(item) {
      const res = await postCustomer(item)
      if (res) {
        uni.showToast({
          icon: 'none',
          title: '提交成功',
        })
        this.$emit('getList')
      }
      setTimeout(() => {
        uni.hideLoading()
        this.close()
      }, 1000)
    },
    editCustomer(ref) {
      this.$refs[ref].validate().then((item) => {
        uni.showLoading({
          title: '提交中',
        })
        this.editRequest(item)
      }).catch((err) => {
        uni.showToast({
          icon: 'none',
          title: err,
        })
      })
    },
    async editRequest(item) {
      item.id = this.customerId
      const res = await putCustomer(item)
      if (res) {
        uni.showToast({
          icon: 'none',
          title: '提交成功',
        })
        this.$emit('getList')
      }
      setTimeout(() => {
        uni.hideLoading()
        this.close()
      }, 1000)
    },
  },
}
</script>

<style lang="scss" scoped>
	.popConfig {
		z-index: 999;
		background-color: white;
		box-sizing: border-box;
		padding: 25rpx;
		width: 90vw;
		min-height: 600rpx;
		border-radius: 15rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
		.popConfig-title {
			width: 100%;
			font-size: 35rpx;
			display: flex;
			justify-content: space-around;
			font-weight: 600;
			padding: 10rpx 0 20rpx 0;
		}
		.popConfig-content {
			width: 100%;
		}
		.popConfig-btn {
			display: flex;
			flex-direction: row;
			width: 100%;
			justify-content: space-between;
			button {
				width: 45%;
				height: 70rpx;
				line-height: 70rpx;
				background-color: #739eca;
				color: white;
				border-radius: 20rpx;
			}
			button:nth-last-child(2) {
				background-color: white;
				color: #739eca;
				border: 2rpx solid #739eca;
			}
		}
	}
</style>
